import { memo } from "react";
import CourseItemStyle from "./style";
import { courseLabel, timetableCoursetype } from "../../index";
import { Button, Dialog, ErrorBlock, Toast } from "antd-mobile";
import dayjs from "dayjs";
import classNames from "classnames";
import {
  CheckOutline,
  ClockCircleOutline,
  CloseOutline,
} from "antd-mobile-icons";
import { useCancelReserve } from "../../../../service/timetableRecord";

const CourseItem = memo(
  ({
    data,
    label,
    cancelReserveClick,
  }: {
    data: timetableCoursetype[];
    label: courseLabel;
    cancelReserveClick?: () => void;
  }) => {
    const showCancelBtn = (time: string) => {
      if (label !== courseLabel.FUTURE) {
        return false;
      }
      return !dayjs().isSame(time, "day");
    };

    const { cancelReserve, loading } = useCancelReserve();

    const cancelClick = (id: string) => {
      Dialog.show({
        content: "确认取消该课程吗？",
        closeOnAction: true,
        actions: [
          [
            {
              key: "cancel",
              text: "取消",
            },
            {
              key: "delete",
              text: "确认",
              bold: true,
              danger: true,
              onClick() {
                void cancelReserve(id).then((res) => {
                  if (!res.code) {
                    Toast.show({
                      icon: <CloseOutline />,
                      content: res.messages,
                    });
                  } else {
                    cancelReserveClick!();
                    Toast.show({
                      icon: <CheckOutline />,
                      content: "取消预约成功！",
                    });
                  }
                });
              },
            },
          ],
        ],
      });
    };
    return (
      <CourseItemStyle>
        {data.length === 0 ? (
          <ErrorBlock status="empty" title="暂无课程" />
        ) : (
          data.map((item) => {
            return (
              <div
                key={item.id}
                className={classNames("courseItemWrapper", label)}
              >
                <div className="left">
                  <div className="title">{item.name}</div>
                  <div className="date">
                    <ClockCircleOutline />
                    &nbsp;
                    {dayjs(item.time.classDay).format("YYYY-MM-DD")}
                  </div>
                </div>
                <div className="right">
                  <div className="time">{`${item.time.startTime.slice(
                    0,
                    5
                  )} - ${item.time.endTime.slice(0, 5)}`}</div>
                  {showCancelBtn(item.time.classDay) && (
                    <Button
                      onClick={() => cancelClick(item.timetableRecordId)}
                      loading={loading}
                    >
                      取消预约
                    </Button>
                  )}
                </div>
              </div>
            );
          })
        )}
      </CourseItemStyle>
    );
  }
);

export default CourseItem;
